<template>
  <u-mask :show="show" @click="close" duration="300" :zoom="false">
    <view class="relative w-screen h-screen bg-transparent">
      <view
        class="flex absolute left-4 flex-col bg-white shadow-[0rem_.125rem_.3125rem_0rem_rgba(51,51,51,0.2)] rounded-md"
        :style="{ top: topDistance - 10 + 'px' }"
      >
        <view class="flex gap-2 items-center p-3" @click="vk.navigateBack()">
          <image src="/static/dddr100.png" mode="aspectFill" class="size-6" />
          <view class="text-[.9375rem] text-[#FF2948]">不保存返回 </view>
        </view>
        <view class="flex gap-2 items-center p-3 border-t" @click="saveDraft">
          <image src="/static/dddr101.png" mode="aspectFill" class="size-6" />
          <view class="text-[.9375rem] text-[#161A24]">存草稿 </view>
        </view>
        <!-- 添加三角形指示器 -->

        <view
          class="absolute -top-[.5rem] left-2 w-0 h-0 border-x-[.375rem] border-x-transparent border-b-[.5rem] border-b-white"
        >
        </view>
      </view>
    </view>
  </u-mask>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      topDistance: {
        type: [Number, String],
        default: 0,
        validator: function (value) {
          // 确保值可以被转换为数字
          return !isNaN(Number(value))
        }
      }
    },
    computed: {},

    methods: {
      saveDraft() {
        this.$emit('saveDraft')
      },
      close() {
        this.$emit('update:show')
      }
    }
  }
</script>

<style lang="scss" scoped></style>
